/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Forms

## Basic inputs and labels

Our forms styles are **opt-in**, which means you need to add the right CSS
classes to inputs, labels, etc. to see the styles. (This prevents us from breaking
any existing Canvas forms CSS.) Inputs, selects, textareas, etc. should be
given the `.ic-Input` class, while labels should have the `.ic-Label` class.

The `.ic-Form-control` element provides positioning context and margin for
each label-input pair.

```html
<div class="ic-Form-control">
  <label for="demo-text-input-1" class="ic-Label">This is a label</label>
  <input type="text" id="demo-text-input-1" class="ic-Input" placeholder="Don't forget a helpful placeholder">
</div>
<div class="ic-Form-control">
  <label for="demo-text-input-2" class="ic-Label">This is another label</label>
  <select class="ic-Input" id="demo-text-input-2">
    <option>This is an option</option>
    <option>This is another option</option>
    <option>This is yet another option</option>
  </select>
</div>
```

## Multiple inputs within a single form control

This is a common UI pattern in Canvas, made much easier with flexbox.

```html
<div class="ic-Form-control">
  <label for="demo-text-input-3" class="ic-Label">Favorite 2 colors</label>
  <div class="ic-Multi-input">
    <input type="text" id="demo-text-input-3" class="ic-Input" placeholder="e.g., purple">
    <span>and</span>
    <input type="text" id="demo-text-input-4" class="ic-Input" placeholder="e.g., purple">
  </div>
</div>
```
<br/>
Also works with ``.ic-Input-group`` (see more about ``.ic-Input-group`` below)
<br/>

```html
<div class="ic-Form-control">
  <label for="demo-text-input-5" class="ic-Label">Enter 2 friends' email addresses</label>
  <div class="ic-Multi-input">
    <div class="ic-Input-group">
      <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
        <i class="icon-email"></i>
      </div>
      <input id="demo-text-input-5" class="ic-Input" placeholder="e.g., joe@site.com" type="email">
    </div>
    <span>and</span>
    <div class="ic-Input-group">
      <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
        <i class="icon-email"></i>
      </div>
      <input id="demo-text-input-6" class="ic-Input" placeholder="e.g., joe@site.com" type="email">
    </div>
  </div>

</div>
```

## Radio buttons

### Radio button group

Radio button groups should be contained within their own `<fieldset>` with
the class `ic-Fieldset--radio-checkbox` and labeled with a `<legend>`.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Favorite flower
  </legend>
  <div class="ic-Form-control ic-Form-control--radio">
    <div class="ic-Radio">
      <input id="tulip" type="radio" value="tulip" name="flower" checked>
      <label for="tulip" class="ic-Label">Tulip</label>
    </div>
    <div class="ic-Radio">
      <input id="daisy" type="radio" value="daisy" name="flower">
      <label for="daisy" class="ic-Label">Daisy</label>
    </div>
    <div class="ic-Radio">
      <input id="daffodil" type="radio" value="daffodil" name="flower">
      <label for="daffodil" class="ic-Label">Daffodil</label>
    </div>
  </div>
</fieldset>
```

### Inline radio button group

Add the `ic-Form-control--radio-inline` class to the `ic-Form-control--radio`
element to make the radio buttons display inline.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Favorite Premier League team
  </legend>
  <div class="ic-Form-control ic-Form-control--radio ic-Form-control--radio-inline">
    <div class="ic-Radio">
      <input id="liverpool" type="radio" value="liverpool" name="epl" checked>
      <label for="liverpool" class="ic-Label">Liverpool</label>
    </div>
    <div class="ic-Radio">
      <input id="manutd" type="radio" value="manutd" name="epl">
      <label for="manutd" class="ic-Label">Manchester United</label>
    </div>
    <div class="ic-Radio">
      <input id="astonvilla" type="radio" value="astonvilla" name="epl" disabled>
      <label for="astonvilla" class="ic-Label">Aston Villa (relegated)</label>
    </div>
    <div class="ic-Radio">
      <input id="otherteam" type="radio" value="otherteam" name="epl">
      <label for="otherteam" class="ic-Label">Another team</label>
    </div>
  </div>
</fieldset>
```

## Checkboxes

### Basic checkbox
For these to work properly, make sure the ``for`` attribute of the ``label`` matches the ``id``
of the ``checkbox`` element. If you want to use default checkboxes, the existing Bootstrap 2.x
styles have been left unchanged.

```html
<div class="ic-Form-control ic-Form-control--checkbox">
  <input type="checkbox" id="freecandy">
  <label class="ic-Label" for="freecandy">Yes, I want free candy</label>
</div>
```

### Checkbox group
Checkbox groups should be contained within their own `<fieldset>` with
the class `ic-Fieldset--radio-checkbox` and labeled with a `<legend>`.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Major label artists you admire
  </legend>
  <div class="ic-Checkbox-group">
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="beyonce">
      <label class="ic-Label" for="beyonce">Beyonce</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="coldplay">
      <label class="ic-Label" for="coldplay">Coldplay</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="mariah">
      <label class="ic-Label" for="mariah">Mariah Carey</label>
    </div>
  </div>
</fieldset>
```

### Inline checkbox group
Add the `ic-Checkbox-group--inline` class to the `ic-Checkbox-group`
element to make the checkboxes display inline.

```html
<fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
  <legend class="ic-Legend">
    Major label artists you admire
  </legend>
  <div class="ic-Checkbox-group ic-Checkbox-group--inline">
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="beyonce2">
      <label class="ic-Label" for="beyonce2">Beyonce</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="coldplay2">
      <label class="ic-Label" for="coldplay2">Coldplay</label>
    </div>
    <div class="ic-Form-control ic-Form-control--checkbox">
      <input type="checkbox" id="mariah2">
      <label class="ic-Label" for="mariah2">Mariah Carey</label>
    </div>
  </div>
</fieldset>
```

## Fieldsets

Use `<fieldset class="ic-Fieldset">` to group related form
sections. Label each fieldset with `<legend class="ic-Legend">`.

```html
<div class="ic-Form-group ic-Form-group--horizontal">
  <fieldset class="ic-Fieldset">
    <legend class="ic-Legend">Personal information</legend>
    <div class="ic-Form-control">
      <label class="ic-Label" for="firstname">First name</label>
      <input type="text" class="ic-Input" id="firstname" />
    </div>
    <div class="ic-Form-control">
      <label class="ic-Label" for="lastname">Last name</label>
      <input type="text" class="ic-Input" id="lastname" />
    </div>
    <fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
      <legend class="ic-Legend">
        Prefix
      </legend>
      <div class="ic-Form-control ic-Form-control--radio ic-Form-control--radio-inline">
        <div class="ic-Radio">
          <input id="mr" type="radio" value="mr" name="prefix" checked>
          <label for="mr" class="ic-Label">Mr.</label>
        </div>
        <div class="ic-Radio">
          <input id="ms" type="radio" value="ms" name="prefix">
          <label for="ms" class="ic-Label">Ms.</label>
        </div>
        <div class="ic-Radio">
          <input id="mrs" type="radio" value="mrs" name="prefix">
          <label for="mrs" class="ic-Label">Mrs.</label>
        </div>
      </div>
    </fieldset>
    <fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
      <legend class="ic-Legend">
        Instructure office locations worked at
      </legend>
      <div class="ic-Checkbox-group ic-Checkbox-group--inline">
        <div class="ic-Form-control ic-Form-control--checkbox">
          <input type="checkbox" id="saltlake">
          <label class="ic-Label" for="saltlake">Salt Lake City, UT</label>
        </div>
        <div class="ic-Form-control ic-Form-control--checkbox">
          <input type="checkbox" id="chicago">
          <label class="ic-Label" for="chicago">Chicago, IL</label>
        </div>
        <div class="ic-Form-control ic-Form-control--checkbox">
          <input type="checkbox" id="seattle">
          <label class="ic-Label" for="seattle">Seattle, WA</label>
        </div>
        <div class="ic-Form-control ic-Form-control--checkbox">
          <input type="checkbox" id="remote">
          <label class="ic-Label" for="remote">Weird remote pajama person</label>
        </div>
      </div>
    </fieldset>
  </fieldset>
  <fieldset class="ic-Fieldset">
    <legend class="ic-Legend">Security questions</legend>
    <div class="ic-Form-control">
      <label class="ic-Label" for="firstpet">Name of your first pet</label>
      <input type="text" class="ic-Input" id="firstpet" placeholder="e.g., Mr. Wuffles" />
    </div>
    <div class="ic-Form-control">
      <label class="ic-Label" for="firstcar">Name of your first car</label>
      <input type="text" class="ic-Input" id="firstcar" placeholder="e.g., Ford Escort" />
    </div>
  </fieldset>
  <div class="ic-Form-actions">
    <button class="Button" type="button">Cancel</button>
    <button class="Button Button--primary" type="submit">Submit</button>
  </div>
</div>
```

## Super Toggle checkbox

- Regular old checkboxes that look and feel like toggle switches
- No javascript is required for the Super Toggle component.
- **However, including all the right markup is important for it to function properly.**
- The id of the checkbox input must match the "for" attribute of the label, for example.
- This component was designed to be as accessible as a regular checkbox.
- Supports both *:focus* and *disabled* states. Once in focus, it can be toggled via the keyboard by pressing SPACE.
- Icons can be switched out, as you see fit. Or just use the icons in the examples below: You can use icon font characters OR simple inline SVGs!

### Super Toggle type 1: **.ic-Super-toggle--on-off**

The ON state is indicated by a checkmark; OFF is indicated by an X. Ideal for turning features on and off, in place of a regular checkbox.

```html
<div class="ic-Form-control">

  <!-- start super toggle -->
  <label class="ic-Super-toggle--on-off" for="super-toggle-demo1">
    <div class="ic-Label">Enable flux capacitor</div>
    <input type="checkbox" id="super-toggle-demo1" class="ic-Super-toggle__input">
    <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="On" data-unchecked="Off">
      <div class="ic-Super-toggle__switch">
        <div class="ic-Super-toggle__option--LEFT">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>
        </div>
        <div class="ic-Super-toggle__option--RIGHT">
          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>
        </div>
      </div>
    </div>
  </label>
  <!-- end super toggle -->

</div>
```

### Super Toggle type 2: **.ic-Super-toggle--ui-switch**
This is a toggle that switches between 2 states, indicated by icons on the left and right of the toggle.

```html
<div class="ic-Form-control">
  <div class="ic-Label" aria-hidden="true">This is an optional faux label</div>

  <!-- start super toggle -->
  <label class="ic-Super-toggle--ui-switch" for="super-toggle-demo2">
    <span class="screenreader-only">This is the real label</span>
    <input type="checkbox" id="super-toggle-demo2" class="ic-Super-toggle__input">
    <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Option A is selected" data-unchecked="Option B is selected">
      <div class="ic-Super-toggle__option--LEFT">
        <i class="icon-unlock"></i>
      </div>
      <div class="ic-Super-toggle__switch"></div>
      <div class="ic-Super-toggle__option--RIGHT">
        <i class="icon-lock"></i>
      </div>
     </div>
   </label>
  <!-- end super toggle -->

</div>
```

## Simple form example

```html

<div class="grid-row">
    <div class="col-xs-12 col-md-8 off-md-2">

      <!-- Start form markup -->
      <form class="ic-Form-group">
        <div class="ic-Form-control">
          <label for="demo-input-1" class="ic-Label">What's your favorite color?</label>
          <input type="text" id="demo-input-1" class="ic-Input" placeholder="e.g., red"></input>
        </div>
        <div class="ic-Form-control">
          <label for="demo-input-2" class="ic-Label">Choose your favorite season</label>
          <select id="demo-input-2" class="ic-Input">
            <option>Spring</option>
            <option>Summer</option>
            <option>Fall</option>
            <option>Winter</option>
          </select>
        </div>
        <div class="ic-Form-control">
          <label for="demo-input-4" class="ic-Label">Write a quick essay</label>
          <textarea id="demo-input-4"class="ic-Input" placeholder="Don't be shy. Express yourself!"></textarea>
        </div>
        <div class="ic-Form-control">
          <!-- start super toggle -->
          <label class="ic-Super-toggle--on-off" for="super-toggle-demo3">
            <div class="ic-Label">Receive daily free breakfasts</div>
            <input type="checkbox" id="super-toggle-demo3" class="ic-Super-toggle__input">
            <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Yes" data-unchecked="No">
              <div class="ic-Super-toggle__switch">
                <div class="ic-Super-toggle__option--LEFT">
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>
                </div>
                <div class="ic-Super-toggle__option--RIGHT">
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>
                </div>
              </div>
            </div>
          </label>
          <!-- end super toggle -->
        </div>
        <fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
          <legend class="ic-Legend">
            Contact preferences
          </legend>
          <div class="ic-Checkbox-group">
            <div class="ic-Form-control ic-Form-control--checkbox">
              <input type="checkbox" id="demo-input-10a" checked>
              <label class="ic-Label" for="demo-input-10a">Email me about new products</label>
            </div>
            <div class="ic-Form-control ic-Form-control--checkbox">
              <input type="checkbox" id="demo-input-10b">
              <label class="ic-Label" for="demo-input-10b">Email me ONLY about special offers</label>
            </div>
          </div>
        </fieldset>
        <fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
          <legend class="ic-Legend">
            What free gift would you like?
          </legend>
          <div class="ic-Form-control ic-Form-control--radio">
            <div class="ic-Radio">
              <input id="demo-radio-horiz-3" type="radio" value="hoodie" name="demo-radio-horiz-group-2" checked>
              <label for="demo-radio-horiz-3" class="ic-Label">I would like a hoodie</label>
            </div>
            <div class="ic-Radio">
              <input id="demo-radio-horiz-4" type="radio" value="frisbee" name="demo-radio-horiz-group-2">
              <label for="demo-radio-horiz-4" class="ic-Label">I would like a frisbee</label>
            </div>
          </div>
        </fieldset>
        <div class="ic-Form-actions">
          <button class="Button" type="button">Cancel</button>
          <button class="Button Button--primary" type="submit">Submit</button>
        </div>
      </form>
      <!-- End form markup -->
    </div>
</div>

```

### The same form with the inputs and labels displayed inline

Simply add `.ic-Form-group--horizontal` to the `.ic-Form-group` element.

(Collapses into a single-column form at lower screen widths.)

```html
<div class="content-box">
  <div class="grid-row">
      <div class="col-xs-12 col-md-8 off-md-2">

        <!-- Start form markup -->
        <form class="ic-Form-group ic-Form-group--horizontal">
          <div class="ic-Form-control">
            <label for="demo-input-5" class="ic-Label">What's your favorite color?</label>
            <input type="text" id="demo-input-5" class="ic-Input" placeholder="e.g., red"></input>
          </div>
          <div class="ic-Form-control">
            <label for="demo-input-6" class="ic-Label">Choose your favorite season</label>
            <select id="demo-input-6" class="ic-Input">
              <option>Spring</option>
              <option>Summer</option>
              <option>Fall</option>
              <option>Winter</option>
            </select>
          </div>
          <div class="ic-Form-control">
            <label for="demo-input-7" class="ic-Label">Write a quick essay</label>
            <textarea id="demo-input-7"class="ic-Input" placeholder="Don't be shy. Express yourself!"></textarea>
          </div>
          <div class="ic-Form-control">
          <!-- start super toggle -->
          <label class="ic-Super-toggle--on-off" for="super-toggle-demo4">
            <div class="ic-Label">Receive daily free breakfasts</div>
            <input type="checkbox" id="super-toggle-demo4" class="ic-Super-toggle__input">
            <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Yes" data-unchecked="No">
              <div class="ic-Super-toggle__switch">
                <div class="ic-Super-toggle__option--LEFT">
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>
                </div>
                <div class="ic-Super-toggle__option--RIGHT">
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>
                </div>
              </div>
            </div>
          </label>
          <!-- end super toggle -->
          </div>
          <fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
            <legend class="ic-Legend">
              Contact preferences
            </legend>
            <div class="ic-Checkbox-group">
              <div class="ic-Form-control ic-Form-control--checkbox">
                <input type="checkbox" id="demo-input-99a" checked>
                <label class="ic-Label" for="demo-input-99a">Email me about new products</label>
              </div>
              <div class="ic-Form-control ic-Form-control--checkbox">
                <input type="checkbox" id="demo-input-99b">
                <label class="ic-Label" for="demo-input-99b">Email me ONLY about special offers</label>
              </div>
            </div>
          </fieldset>
          <fieldset class="ic-Fieldset ic-Fieldset--radio-checkbox">
            <legend class="ic-Legend">
              What free gift would you like?
            </legend>
            <div class="ic-Form-control ic-Form-control--radio">
              <div class="ic-Radio">
                <input id="demo-radio-horiz-1" type="radio" value="hoodie" name="demo-radio-horiz-group" checked>
                <label for="demo-radio-horiz-1" class="ic-Label">I would like a hoodie</label>
              </div>
              <div class="ic-Radio">
                <input id="demo-radio-horiz-2" type="radio" value="frisbee" name="demo-radio-horiz-group">
                <label for="demo-radio-horiz-2" class="ic-Label">I would like a frisbee</label>
              </div>
            </div>
          </fieldset>
          <div class="ic-Form-actions">
            <button class="Button" type="button">Cancel</button>
            <button class="Button Button--primary" type="submit">Submit</button>
          </div>
        </form>
        <!-- End form markup -->

      </div>
  </div>
</div>

```

## Inline forms

At tablet screen-width, this form spreads out in a single row. Simply add ``.ic-Form-group--inline`` to the ``.ic-Form-group`` class.

**Use this one sparingly. Add too many inputs, and it won't look good or work well for the user.**

```html
<div class="content-box">
  <form class="ic-Form-group ic-Form-group--inline">
    <div class="ic-Form-control">
      <label for="demo-input-6" class="ic-Label">Your name</label>
      <input type="text" id="demo-input-6" class="ic-Input"></input>
    </div>
    <div class="ic-Form-control">
      <label class="ic-Label">Select a season</label>
      <select class="ic-Input">
        <option>Spring</option>
        <option>Summer</option>
        <option>Fall</option>
        <option>Winter</option>
      </select>
    </div>
    <div class="ic-Checkbox-group">
      <div class="ic-Form-control ic-Form-control--checkbox">
        <input type="checkbox" id="demo-ic-check-9">
        <label class="ic-Label" for="demo-ic-check-9">Remember me</label>
      </div>
    </div>
    <div class="ic-Form-actions">
      <button class="Button" type="button">Cancel</button>
      <button class="Button Button--primary" type="submit">Submit</button>
    </div>
  </form>
</div>
```

## The amazing **.ic-Input-group**

Like Bootstrap's, but better! Combine ``.ic-Input`` -styled inputs with buttons, labels, icons or just plain text characters to produce user-friendly form fields.

### Simple example: make a payment input easier to use:

```html
<div class="ic-Form-control">
  <label class="ic-Label" for="demo-your-donation">Your donation</label>
  <div class="ic-Input-group">
    <div class="ic-Input-group__add-on">$</div>
    <input type="number" id="demo-your-donation" class="ic-Input"></input>
    <div class="ic-Input-group__add-on">.00</div>
  </div>
</div>
```
### Add some spice with an icon!

```html

<div class="ic-Form-control">
  <label class="ic-Label" for="demo-group-name">Group name</label>
  <div class="ic-Input-group">
    <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
      <i class="icon-group-new-dark" role="presentation"></i>
    </div>
    <input type="text" id="demo-group-name" class="ic-Input" placeholder="e.g., Team Awesomeness"></input>
  </div>
</div>
```

### Inline labels and buttons!

Put ``.ic-Label`` inside ``ic-Input-group`` to make an inline label. Yes, it even works with selects.

```html
<div class="ic-Form-control">
  <div class="ic-Input-group">
    <label class="ic-Label" for="demo-your-email">
      <i class="icon-email" role="presentation"></i>&nbsp;Your email
    </label>
    <input type="email" id="demo-your-email" class="ic-Input"></input>
    <button class="Button Button--primary" type="button">Save</button>
  </div>
</div>

<div class="ic-Form-control">
  <div class="ic-Input-group">
    <label class="ic-Label" for="demo-choose-quiz">
      <i class="icon-quiz" role="presentation"></i>&nbsp;Choose quiz
    </label>
    <select class="ic-Input" id="demo-choose-quiz">
      <option>English 101 Pop Quiz</option>
      <option>Midterm exam</option>
      <option>Long-form essay</option>
      <option>Final exam</option>
    </select>
    <button class="Button" type="button">Go</button>
  </div>
</div>
```

### Putting some form and grid modules together for a multi-column responsive layout

```html
<form>
  <div class="grid-row">
    <div class="col-xs-12 col-md-6">

      <div class="ic-Form-control">
        <label for="demo-responsive-1" class="ic-Label">Full name</label>
        <input type="text" id="demo-responsive-1" class="ic-Input" placeholder="First and last, please."></input>
      </div>
      <div class="ic-Form-control">
        <label for="demo-responsive-2" class="ic-Label">Email address</label>
        <div class="ic-Input-group">
          <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
            <i class="icon-email"></i>
          </div>
          <input id="demo-responsive-2" class="ic-Input" placeholder="joe@example.com" type="email">
        </div>
      </div>
      <div class="ic-Form-control">
        <label for="demo-responsive-3" class="ic-Label">Personal website</label>
        <div class="ic-Input-group">
          <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
            <i class="icon-home"></i>
          </div>
          <input id="demo-responsive-3" class="ic-Input" placeholder="yoursite@domain.com" type="url">
        </div>
      </div>

    </div>
    <div class="col-xs-12 col-md-6">

      <div class="ic-Form-control">
        <label for="demo-responsive-8" class="ic-Label">Preferred working hours</label>
        <div class="ic-Multi-input">
          <input type="time" class="ic-Input" id="demo-responsive-8" aria-label="Start time" placeholder="Start time">
          <span>to</span>
          <input type="time" class="ic-Input" aria-label="End time" placeholder="End time">
        </div>
      </div>

      <div class="ic-Form-control">
        <label for="demo-responsive-5" class="ic-Label">How did you hear about us?</label>
        <textarea id="demo-responsive-5" class="ic-Input"></textarea>
      </div>
      <div class="ic-Checkbox-group">
        <div class="ic-Form-control ic-Form-control--checkbox">
          <input type="checkbox" id="demo-responsive-6" checked>
          <label class="ic-Label" for="demo-responsive-6">I'd like to receive email updates</label>
        </div>
        <div class="ic-Form-control ic-Form-control--checkbox">
          <input type="checkbox" id="demo-responsive-7">
          <label class="ic-Label" for="demo-responsive-7">I'd like to make an in-person appointment</label>
        </div>
      </div>

    </div>
  </div>
  <div class="ic-Form-actions">
    <button class="Button" type="button">Cancel</button>
    <button class="Button Button--primary" type="submit">Submit</button>
  </div>

</form>
```

## .ic-Action-header

New and improved version of a common Canvas UI: a header with action buttons on the right-hand side.

### Simple header with no content on the left side; just buttons.

```html
<div class="ic-Action-header">
  <div class="ic-Action-header__Secondary">
    <button class="Button Button--primary">+ Widget</button>
    <div class="al-dropdown__container">
      <a class="al-trigger Button" role="button" href="#">
        <i class="icon-settings" role="presentation"></i>
        <i class="icon-mini-arrow-down" role="presentation"></i>
        <span class="screenreader-only">Settings</span>
      </a>
      <ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="toolbar-2">
        <li>
          <a href="#" class="icon-edit" tabindex="-1" role="menuitem">Edit settings</a>
        </li>
        <li>
          <a href="#" class="icon-upload" tabindex="-1" role="menuitem">Import widgets</a>
        </li>
      </ul>
    </div>
  </div>
</div>
```

### **.ic-Action-header** with a heading on the left side and buttons on the right.

```html
<div class="ic-Action-header">
  <div class="ic-Action-header__Primary">
    <h3 class="ic-Action-header__Heading">This is a header!</h3>
  </div>
  <div class="ic-Action-header__Secondary">
    <button class="Button Button--primary">+ Widget</button>
    <div class="al-dropdown__container">
      <a class="al-trigger Button" role="button" href="#">
        <i class="icon-settings" role="presentation"></i>
        <i class="icon-mini-arrow-down" role="presentation"></i>
        <span class="screenreader-only">Settings</span>
      </a>
      <ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="toolbar-2">
        <li>
          <a href="#" class="icon-edit" tabindex="-1" role="menuitem">Edit</a>
        </li>
        <li>
          <a href="#" class="icon-trash" tabindex="-1" role="menuitem">Delete</a>
        </li>
      </ul>
    </div>
  </div>
</div>
```

### **.ic-Action-header** with a heading on the left side and super toggle on the right.

```html
<div class="ic-Action-header">
  <div class="ic-Action-header__Primary">
    <h3 class="ic-Action-header__Heading">My amazing term paper</h3>
  </div>
  <div class="ic-Action-header__Secondary">
    <!-- start super toggle -->
    <label class="ic-Super-toggle--ui-switch" for="super-toggle-demo6">
      <span class="screenreader-only">This document is locked</span>
      <input type="checkbox" id="super-toggle-demo6" class="ic-Super-toggle__input">
      <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Document is locked" data-unchecked="Document is NOT locked">
        <div class="ic-Super-toggle__option--LEFT">
          <i class="icon-unlock"></i>
        </div>
        <div class="ic-Super-toggle__switch"></div>
        <div class="ic-Super-toggle__option--RIGHT">
          <i class="icon-lock"></i>
        </div>
       </div>
     </label>
    <!-- end super toggle -->
  </div>
</div>
```

### **.ic-Action-header** with form element on the left side and buttons on the right.

```html
<div class="ic-Action-header">
  <div class="ic-Action-header__Primary">
    <div class="ic-Input-group">
      <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
        <i class="icon-search"></i>
      </div>
      <input class="ic-Input" placeholder="Search widgets" aria-label="Search widgets" value="" type="search">
    </div>
  </div>
  <div class="ic-Action-header__Secondary">
    <button class="Button Button--primary">+ Widget</button>
    <div class="al-dropdown__container">
      <a class="al-trigger Button" role="button" href="#">
        <i class="icon-settings" role="presentation"></i>
        <i class="icon-mini-arrow-down" role="presentation"></i>
        <span class="screenreader-only">Settings</span>
      </a>
      <ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="toolbar-2">
        <li>
          <a href="#" class="icon-edit" tabindex="-1" role="menuitem">Edit</a>
        </li>
        <li>
          <a href="#" class="icon-trash" tabindex="-1" role="menuitem">Delete</a>
        </li>
      </ul>
    </div>
  </div>
</div>
```
### **.ic-Form-action-box**

This responsive pattern is useful for when you need to build instances of things using form elements. It features an area on the right for interactions with the form, such as Delete.

Reduce the width of your screen to see how the example components below both scale down for smaller screens.

```html
<div class="ic-Form-action-box">

  <div class="ic-Form-action-box__Form">
    <div class="ic-Form-control">
      <div class="ic-Input-group">
        <label class="ic-Label" for="demo-action-box-1">
          Name
        </label>
        <input type="text" id="demo-action-box-1" class="ic-Input"></input>
      </div>
    </div>
    <div class="ic-Form-control">
      <div class="ic-Input-group">
        <label class="ic-Label" for="demo-action-box-2">
          Start date
        </label>
        <label class="screenreader-only" id="demo-action-box-2-accessible-label">
          <%= t("Start Date field for styleguide") %>
          <%= datepicker_screenreader_prompt %>
        </label>
        <input type="datetime"
               id="demo-action-box-2"
               class="ic-Input"
               aria-labelledby="demo-action-box-2-accessible-label"
               data-tooltip
               title="<%= accessible_date_format %>">
        </input>
        <button type="button" class="Button" aria-hidden="true" tabindex="-1">
          <i class="icon-calendar-month"></i>
        </button>
      </div>
    </div>
    <div class="ic-Form-control">
      <!-- start super toggle -->
      <label class="ic-Super-toggle--on-off" for="super-toggle-demo8">
        <div class="ic-Label">Teaching assistant</div>
        <input type="checkbox" id="super-toggle-demo8" class="ic-Super-toggle__input">
        <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Yes" data-unchecked="No">
          <div class="ic-Super-toggle__switch">
            <div class="ic-Super-toggle__option--LEFT">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>
            </div>
            <div class="ic-Super-toggle__option--RIGHT">
              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>
            </div>
          </div>
        </div>
      </label>
      <!-- end super toggle -->
    </div>

  </div>

  <div class="ic-Form-action-box__Actions">
    <button type="button" class="Button Button--icon-action">
      <span class="screenreader-only">Delete row</span>
      <i class="icon-trash" role="presentation"></i>
    </button>
  </div>

</div>

<div class="ic-Form-action-box">

  <div class="ic-Form-action-box__Form">

    <div class="ic-Form-control">
      <select class="ic-Input" id="demo-action-box-4" aria-label="Choose a section">
        <option>All sections</option>
        <option>Section 1</option>
        <option>Section 2</option>
        <option>Section 3</option>
      </select>
    </div>
    <div class="ic-Form-control">
      <div class="ic-Input-group">
        <label class="screenreader-only" id="demo-action-box-5-accessible-label">
          <%= t("Due Date field for styleguide") %>
          <%= datepicker_screenreader_prompt %>
        </label>
        <input type="datetime" class="ic-Input" id="demo-action-box-5" placeholder="Due date" aria-labelledby="demo-action-box-5-accessible-label"
               data-tooltip
               title="<%= accessible_date_format %>">
        </input>
        <button type="button" class="Button" aria-hidden="true" tabindex="-1">
          <i class="icon-calendar-month"></i>
        </button>
      </div>
    </div>
    <div class="ic-Form-control">
      <div class="ic-Input-group">
        <label class="screenreader-only" id="demo-action-box-6-accessible-label">
          <%= t("Available From field for styleguide") %>
          <%= datepicker_screenreader_prompt %>
        </label>
        <input type="datetime" class="ic-Input" id="demo-action-box-6" placeholder="Available from" aria-label="demo-action-box-6-accessible-label"
               data-tooltip
               title="<%= accessible_date_format %>">
        </input>
        <button type="button" class="Button" aria-hidden="true" tabindex="-1">
          <i class="icon-calendar-month"></i>
        </button>
      </div>
    </div>
    <div class="ic-Form-control">
      <div class="ic-Input-group">
        <label class="screenreader-only" id="demo-action-box-7-accessible-label">
          <%= t("Available Until field for styleguide") %>
          <%= datepicker_screenreader_prompt %>
        </label>
        <input type="datetime" class="ic-Input" id="demo-action-box-7" placeholder="Until" aria-labelledby="demo-action-box-7-accessible-label"
               data-tooltip
               title="<%= accessible_date_format %>">
        </input>
        <button type="button" class="Button" aria-hidden="true" tabindex="-1">
          <i class="icon-calendar-month"></i>
        </button>
      </div>
    </div>

  </div>

  <div class="ic-Form-action-box__Actions">
    <button type="button" class="Button Button--icon-action">
      <span class="screenreader-only">Delete row</span>
      <i class="icon-trash" role="presentation"></i>
    </button>
  </div>

</div>

```

## Alernate input states and form messages

### Warning, Error and Success states

```html

<!-- Start form markup -->

<div class="ic-Form-control ic-Form-control--has-error">
  <label for="demo-states-1" class="ic-Label">Enter a new password</label>
  <input type="password" id="demo-states-1" class="ic-Input ic-Input--has-error" placeholder="At least 8 characters and 2 numbers"></input>
  <div class="ic-Form-message ic-Form-message--error">
    <div class="ic-Form-message__Layout">
      <i class="icon-warning" role="presentation"></i>
      You have not entered a password yet
    </div>
  </div>
</div>

<div class="ic-Form-control ic-Form-control--has-warning">
  <label for="demo-states-6" class="ic-Label">Enter a new password</label>
  <input type="password" id="demo-states-6" class="ic-Input ic-Input--has-warning" placeholder="At least 8 characters and 2 numbers" value="password"></input>
  <div class="ic-Form-message ic-Form-message--warning">
    <div class="ic-Form-message__Layout">
      <i class="icon-lock" role="presentation"></i>
      Your password is "password" - frd?
    </div>
  </div>
</div>

<div class="ic-Form-control ic-Form-control--has-success">
  <label for="demo-states-5" class="ic-Label">Enter a new password</label>
  <input type="password" id="demo-states-5" class="ic-Input ic-Input--has-success" placeholder="At least 8 characters and 2 numbers" value="grillmaster@1975"></input>
  <div class="ic-Form-message ic-Form-message--success">
    <div class="ic-Form-message__Layout">
      <i class="icon-check" role="presentation"></i>
      Your password meets our requirements!
    </div>
  </div>
</div>
```

### Alternate states and messages applied to horizontal form controls

```html

<div class="ic-Form-group ic-Form-group--horizontal">

  <div class="ic-Form-control ic-Form-control--has-error">
    <label for="demo-states-2" class="ic-Label">What's your favorite color?</label>
    <input type="text" id="demo-states-2" class="ic-Input ic-Input--has-error" placeholder="e.g., red" value="Breakfast burrito"></input>
    <div class="ic-Form-message ic-Form-message--error">
      <div class="ic-Form-message__Layout">
        <i class="icon-warning" role="presentation"></i>
        This is not a valid color.
      </div>
    </div>
  </div>

  <div class="ic-Form-control ic-Form-control--has-success">
    <label for="demo-states-3" class="ic-Label">What's your favorite color?</label>
    <input type="text" id="demo-states-3" class="ic-Input ic-Input--has-success" placeholder="e.g., red" value="Blue">
    <div class="ic-Form-message ic-Form-message--success">
      <div class="ic-Form-message__Layout">
        <i class="icon-check" role="presentation"></i>
        Awesome. Blue is a wonderful color.
      </div>
    </div>
  </div>

  <div class="ic-Form-control ic-Form-control--has-warning">
    <label class="ic-Label" for="demo-states-17">Group name</label>
    <div class="ic-Input-group">
      <div class="ic-Input-group__add-on" role="presentation" aria-hidden="true" tabindex="-1">
        <i class="icon-group-new-dark"></i>
      </div>
      <input type="text" id="demo-states-17" class="ic-Input" placeholder="e.g., Team Awesomeness" value="The Cool Kidz">
      <button type="submit" class="Button">Save</button>
    </div>
    <div class="ic-Form-message ic-Form-message--warning">
      <div class="ic-Form-message__Layout">
        <i class="icon-warning" role="presentation"></i>
        There is already a group with that name. Are you sure?
      </div>
    </div>
  </div>

</div>
```

### Alternate states and messages applied to custom radio buttons

```html
<div class="ic-Form-control ic-Form-control--radio ic-Form-control--has-error">
  <div class="ic-Radio">
    <input id="demo-states-9" type="radio" value="value 1" name="demo-states-radio">
    <label for="demo-states-9" class="ic-Label">myValue 1</label>
  </div>
  <div class="ic-Radio">
    <input id="demo-states-10" type="radio" value="value 2" name="demo-states-radio">
    <label for="demo-states-10" class="ic-Label">myValue 2</label>
  </div>
  <div class="ic-Radio">
    <input id="demo-states-11" type="radio" value="value 3" name="demo-states-radio">
    <label for="demo-states-11" class="ic-Label">myValue 3</label>
  </div>

  <div class="ic-Form-message ic-Form-message--error">
    <div class="ic-Form-message__Layout">
      <i class="icon-warning" role="presentation"></i>
      Please select a value.
    </div>
  </div>

</div>
```

### Alternate states and messages applied to custom checkboxes

```html
<div class="ic-Form-control ic-Form-control--checkbox">
  <input type="checkbox" id="demo-states-13" checked>
  <label class="ic-Label" for="demo-states-13">Salsa</label>
</div>

<div class="ic-Form-control ic-Form-control--checkbox ic-Form-control--has-warning">
  <input type="checkbox" id="demo-states-12">
  <label class="ic-Label" for="demo-states-12">Free taco <strong>TODAY ONLY!</strong></label>
  <div class="ic-Form-message ic-Form-message--warning">
    <div class="ic-Form-message__Layout">
      <i class="icon-warning" role="presentation"></i>
      Are you sure you don't want a free taco?
    </div>
  </div>
</div>

<div class="ic-Form-control ic-Form-control--checkbox">
  <input type="checkbox" id="demo-states-14" checked>
  <label class="ic-Label" for="demo-states-14">Refried beans</label>
</div>
```

### Alternate states and messages applied to inline custom checkboxes

```html
<div class="ic-Checkbox-group ic-Checkbox-group--inline">

  <div class="ic-Form-control ic-Form-control--checkbox ic-Form-control--has-error">
    <input type="checkbox" id="demo-states-15" checked>
    <label class="ic-Label" for="demo-states-15">Super Skooool LMS</label>
    <div class="ic-Form-message ic-Form-message--error">
      <div class="ic-Form-message__Layout">
        <i class="icon-warning" role="presentation"></i>
        Dreadful choice. Reconsider.
      </div>
    </div>
  </div>

  <div class="ic-Form-control ic-Form-control--checkbox ic-Form-control--has-warning">
    <input type="checkbox" id="demo-states-17" checked>
    <label class="ic-Label" for="demo-states-17">Kool Skool Toolz</label>
    <div class="ic-Form-message ic-Form-message--warning">
      <div class="ic-Form-message__Layout">
        <i class="icon-instructure" role="presentation"></i>
        You can do better.
      </div>
    </div>
  </div>

  <div class="ic-Form-control ic-Form-control--checkbox ic-Form-control--has-success">
    <input type="checkbox" id="demo-states-16" checked>
    <label class="ic-Label" for="demo-states-16">Canvas by Instructure</label>
    <div class="ic-Form-message ic-Form-message--success">
      <div class="ic-Form-message__Layout">
        <i class="icon-check" role="presentation"></i>
        Excellent choice, my friend!
      </div>
    </div>
  </div>

</div>
```

### Alternate states and messages applied to toggle checkbox

```html
<div class="grid-row">
  <div class="col-md-6">

    <div class="ic-Form-group">
      <div class="ic-Form-control ic-Form-control--has-warning">
        <!-- start super toggle -->
        <label class="ic-Super-toggle--on-off" for="ic-toggle-error-demo-1">
          <div class="ic-Label">Publish assignment immediately</div>
          <input type="checkbox" id="ic-toggle-error-demo-1" class="ic-Super-toggle__input" checked>
          <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Yes" data-unchecked="No">
            <div class="ic-Super-toggle__switch">
              <div class="ic-Super-toggle__option--LEFT">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>
              </div>
              <div class="ic-Super-toggle__option--RIGHT">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>
              </div>
            </div>
          </div>
        </label>
        <!-- end super toggle -->
        <div class="ic-Form-message ic-Form-message--warning">
          <div class="ic-Form-message__Layout">
            <i class="icon-warning" role="presentation"></i>
            Are you sure you want to do this?
          </div>
        </div>
      </div>
    </div>

  </div>
  <div class="col-md-6">

    <div class="ic-Form-group ic-Form-group--horizontal">
      <div class="ic-Form-control ic-Form-control--has-error">
        <!-- start super toggle -->
        <label class="ic-Super-toggle--on-off" for="ic-toggle-error-demo-2">
          <div class="ic-Label">Publish assignment immediately</div>
          <input type="checkbox" id="ic-toggle-error-demo-2" class="ic-Super-toggle__input" checked>
          <div class="ic-Super-toggle__container" aria-hidden="true" data-checked="Published" data-unchecked="Unpublished">
            <div class="ic-Super-toggle__switch">
              <div class="ic-Super-toggle__option--LEFT">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="548.9" height="548.9" viewBox="0 0 548.9 548.9" xml:space="preserve"><polygon points="449.3 48 195.5 301.8 99.5 205.9 0 305.4 95.9 401.4 195.5 500.9 295 401.4 548.9 147.5 "/></svg>
              </div>
              <div class="ic-Super-toggle__option--RIGHT">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 28 28" xml:space="preserve"><polygon points="28 22.4 19.6 14 28 5.6 22.4 0 14 8.4 5.6 0 0 5.6 8.4 14 0 22.4 5.6 28 14 19.6 22.4 28 " fill="#030104"/></svg>
              </div>
            </div>
          </div>
        </label>
        <!-- end super toggle -->
        <div class="ic-Form-message ic-Form-message--error">
          <div class="ic-Form-message__Layout">
            <i class="icon-warning" role="presentation"></i>
            This course cannot be published without content
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
```

*/

$ic-Input-border: lighten($ic-color-dark, 65);
@if $use_high_contrast { $ic-Input-border: $ic-color-dark; }

$ic-Input-standard-height: 38px;

@mixin ic-input-variant($border-color, $color, $outline-color: rgba($color, 0.2)) {
  border-color: $border-color;
  &:focus {
    border-color: $color;
    @if not $use_high_contrast {
      outline-color: $outline-color;
    }
  }
}

@mixin high-contrast-focus {
  @if $use_high_contrast {
    outline: 1px dotted $ic-color-dark;
    outline-offset: -1px;
  }
}

select, textarea,
input[type="text"], input[type="password"],
input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"],
input[type="time"], input[type="week"],
input[type="number"], input[type="email"],
input[type="url"], input[type="search"],
input[type="tel"], input[type="color"], .uneditable-input {

  // .ic-Input is the base class for the updated form controls.

  &.ic-Input {
    // Overwrite legacy forms styles from Bootstrap 2.
    width: 100%; height: $ic-Input-standard-height;
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    box-shadow: none;
    box-sizing: border-box;

    // Establish the basic styles for Canvas text-type inputs
    transition: all 0.2s ease-out;
    border-width: 1px;
    border-style: solid;
    outline-color: transparent;
    outline-offset: -$ic-sp;
    background: $ic-color-light;
    padding: 8px 12px;

    // Remove the webkit gloss in iOS
    -webkit-appearance: none;

    //@include ic-input-variant($ic-Input-border, $ic-brand-primary), var(--ic-brand-primary-lightened-15);

    @if $use_high_contrast {
      outline-style: dotted;
      outline-width: 1px;
    }
    @else {
      outline-style: solid;
      outline-width: $ic-sp;
    }

    // Focus state
    &:focus {
      @if $use_high_contrast {
        outline-width: 1px;
        outline-offset: -3px;
        outline-color: $ic-color-dark;
      }
      @else {
        outline-width: 2px;
        outline-offset: -2px;
      }
    }

    // If a form message follows the input, bump it up a bit to overlap with the input
    ~ .ic-Form-message { transform: translate3d(0,-$ic-sp/3,0); }

    // Focus then moves the form message out of the way
    &:focus {
      ~ .ic-Form-message { transform: translate3d(0,$ic-sp/2,0); }
    }

    // Disabled state
    &[disabled], &[readonly] {
      cursor: not-allowed;
      background-color: lighten($ic-color-neutral, 5%);
      opacity: 0.8;
    }

    // Input variants
    &.ic-Input--has-error, .ic-Form-control--has-error & { @include ic-input-variant($ic-color-danger, $ic-color-danger); }
    &.ic-Input--has-warning, .ic-Form-control--has-warning & { @include ic-input-variant($ic-color-alert, $ic-color-alert); }
    &.ic-Input--has-success, .ic-Form-control--has-success & { @include ic-input-variant($ic-color-success, $ic-color-success); }

  }

}

// special styles for select
select.ic-Input, input[type="file"].ic-Input {
  padding: 0 0 0 $ic-sp;
}

// special styles for textarea
textarea.ic-Input {
  height: auto;
  resize: vertical;
}

// We removed -webkit-appearance from anything with the
// .ic-Input class, to give us more styling control.
// This makes the select's caret disappear in IE Edge and Webkit.
// So we add it back in with these hacks.

@mixin add-arrow-for-webkit-and-ie-edge($bg-position-x) {
  background-color: $ic-color-light;
  background-image: url("/images/forms/ic-icon-arrow-down.svg");
  background-repeat: no-repeat;
  background-size: 10px 5.667px;
  background-position: $bg-position-x 50%;
  padding: 0 $ic-sp*2 0 $ic-sp;
}

// webkit hack
select.ic-Input:not(*:root) {
  @include add-arrow-for-webkit-and-ie-edge( calc(100% - #{$ic-sp - 4}) );
}

// IE Edge hack (doesn't support calc here, so we need to use a percentage)
@supports (-ms-accelerator:true) {
  select.ic-Input { @include add-arrow-for-webkit-and-ie-edge(99%); }
}


.ic-Form-group {

  &.ic-Form-group--inline {

    @include breakpoint(tablet) {
      display: flex;
      align-items: flex-end;

      .ic-Form-actions {
        margin-top: 0;
        border: none;
        padding: 0 0 0 $ic-sp;
        background: transparent;
      }
      .ic-Form-control:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio),
      .ic-Checkbox-group {
        flex: 1;
        margin: 0 $ic-sp/2;
        &:first-child { margin-left: 0; }
        &:last-child { margin-right: 0; }

        .ic-Form-message { margin-left: 0; }
      }

    }
  }

  &.ic-Form-group--horizontal {
    @include breakpoint(tablet) {

      > .ic-Form-control {

        &:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio) {
          display: flex;
          flex-wrap: wrap;

          > .ic-Label {
            margin-bottom: 0;
            flex: 0 0 $ic-horizontal-form-offset;
            padding-right: $ic-sp*2;
          }

          > .ic-Input,
          > .ic-Input-group,
          > .ic-Multi-input,
          > .ic-Forms-component { flex: 1; }

          > .ic-Form-message {
            display: block;
            margin-left: 0;
            width: 100%;
            .ic-Form-message__Layout {
              margin-left: $ic-horizontal-form-offset + $ic-sp;
              display: inline-flex;
            }
          }

          > .ic-Form-help-text {
            padding-left: $ic-horizontal-form-offset;
          }
        }

        &:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio):not(.ic-Form-control--top-align-label) {
          align-items: center;
        }

        &.ic-Form-control--top-align-label > .ic-Label {
          transform: translateY(2px);
        }
      }

      > .ic-Fieldset--radio-checkbox {
        position: relative;
        padding-left: $ic-horizontal-form-offset;
        min-height: 30px;

        > .ic-Legend {
          position: absolute;
          top: 5px; left: 0;
          width: $ic-horizontal-form-offset - ($ic-sp * 2);
          margin-bottom: 0;
        }
      }
    }

  }

}

// HACK - whole thing can be removed once IE11/Win7 support is dropped
@include breakpoint(tablet) {
  _:-ms-input-placeholder, :root  {
    .ic-Form-group.ic-Form-group--horizontal {

      > .ic-Form-control:not(.ic-Form-control--checkbox):not(.ic-Form-control--radio) {
        .ic-Form-help-text {
          padding-left: $ic-horizontal-form-offset + $ic-sp*2;
        }
      }

      > .ic-Fieldset--radio-checkbox {
        padding-left: $ic-horizontal-form-offset + $ic-sp*2;

        .ic-Legend {
          width: $ic-horizontal-form-offset;
        }
      }

    }

  }
}

@mixin form-message-variant($color) {
  .ic-Form-message__Layout {
    background: $color;
    &:before {
      background: darken($color, 5%);
      border-right: 1px solid darken($color, 12%);
    }
    &:after { border-bottom-color: darken($color, 5%); }
  }
}

.ic-Form-message {
  display: inline-block;
  margin-left: $ic-sp;
  position: relative;
  z-index: 1;
  transition: all 0.2s $ic-transition;
  box-sizing: border-box;
  &.ic-Form-message--error { @include form-message-variant($ic-color-danger); }
  &.ic-Form-message--success { @include form-message-variant($ic-color-success); }
  &.ic-Form-message--warning { @include form-message-variant($ic-color-alert); }
}

// Make error message styles work with ic-Super-toggle
.ic-Form-group:not(.ic-Form-group--horizontal) [class^="ic-Super-toggle--"] + .ic-Form-message {
  display: block;
  margin-left: 0;
  .ic-Form-message__Layout { display: inline-flex; }
}

.ic-Input-group + .ic-Form-message { margin-left: 0; }

.ic-Form-message__Layout {
  position: relative;
  display: flex;
  align-items: center;
  padding: ($ic-sp - 4) ($ic-sp - 4) ($ic-sp - 4) 0;
  @include fontSize($ic-font-size--xsmall);
  line-height: 1.2;
  color: $ic-color-light;
  box-shadow: 0 2px 2px rgba(black, 0.2);
  box-sizing: border-box;

  &:before {
    content: "";
    width: 32px;
    height: 100%;
    position: absolute;
    left: 0; top: 0;
    box-sizing: border-box;
  }

  &:after {
    bottom: 100%; left: 16px;
    border: solid transparent;
    content: "";
    height: 0; width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(white, 0);
    border-width: $ic-sp/2;
    margin-left: -($ic-sp/2);
    box-sizing: border-box;
  }

  // specifying link color here, just in case we need a link inside a form message
  a {
    color: $ic-color-light;
    text-decoration: underline;
    &:hover, &:focus {
      color: $ic-color-light;
      text-decoration: none;
    }
  }

  i[class*=icon-], i[class^=icon-] {
    width: 32px; height: auto;
    flex: 0 0 32px;
    line-height: 1;
    margin-right: $ic-sp - 4;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// Overwrite default margin on form element
form.ic-Form-group { margin: 0; }

.ic-Form-control {
  display: block;
  box-sizing: border-box;
  margin-bottom: $ic-sp*1.5;
  position: relative;
  display: block;

  .ic-Form-control--radio {
    margin-bottom: 0;
  }

  &.ic-Form-control--checkbox-inline,
  &.ic-Form-control--radio-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .ic-Form-message__Layout:after { display: none; }

    &.ic-Form-control--checkbox,
    .ic-Radio { padding-right: $ic-sp*1.5; }
  }

  &.ic-Form-control--has-error {
    .ic-Label,
    .ic-Input-group__add-on {
      color: $ic-color-danger;
    }
  }

  &.ic-Form-control--has-warning {
    .ic-Label,
    .ic-Input-group__add-on {
      color: $ic-color-alert;
    }
  }

  &.ic-Form-control--has-success {
    .ic-Label,
    .ic-Input-group__add-on {
      color: $ic-color-success;
    }
  }
}

.ic-Multi-input {
  @include breakpoint(mini-tablet) {
    display: flex;
    align-items: center;

    > .ic-Input,
    > .ic-Input-group {
      margin: 0 $ic-sp/3;
      flex: 1;
      &:first-child { margin-left: 0; }
      &:last-child { margin-right: 0; }
    }
  }
}

.ic-Label {
  box-sizing: border-box;
  user-select: none;
  margin: 0 0 $ic-sp/2;
  display: block;
  line-height: $ic-label-line-height;
  font-weight: bold;
  @include fontSize($ic-font-size--small);
}

.ic-Form-actions {
  box-sizing: border-box;
  margin-top: $ic-sp;
  border: 1px solid $ic-border-light;
  padding: $ic-sp;
  text-align: right;
  background: darken($ic-color-light, 3%);
  white-space: nowrap;
}

.ic-Fieldset {
  box-sizing: border-box;
  margin: 0 0 $ic-sp*1.5;
  padding: 0;
  border: none;
  width: 100%;

  // when the fieldset contains a radio or checkbox group, use this class
  // to give the legend the appearance of a label
  &.ic-Fieldset--radio-checkbox {
    margin-bottom: $ic-sp*1.75;

    .ic-Legend {
      margin-bottom: $ic-sp/2;
      font-weight: bold;
      @include fontSize($ic-font-size--small);
      border-bottom: none;
      padding-bottom: 0;
    }

    .ic-Form-control--radio {
      margin-bottom: 0;
    }
  }
}

.ic-Legend {
  box-sizing: border-box;
  width: 100%;
  border: none;
  padding: 0 0 $ic-sp/2;
  margin: 0 0 $ic-sp*2;
  @include fontSize(18px);
  line-height: $ic-label-line-height;
  color: $ic-font-color-dark;
  border-bottom: 1px solid $ic-border-light;
}

.ic-Radio {
  overflow: hidden;
  position: relative;
  box-sizing: border-box;

  .ic-Label {
    margin: 0;
    position: relative;
    z-index: 1;
    padding: $ic-sp/3 0 $ic-sp/3 $ic-radio-checkbox-left-offset;
    font-weight: normal;
    display: inline-block;

    &:before {
      transition: all 0.2s ease-out;
      content: "";
      box-sizing: border-box;
      border-radius: 100%;
      width: 16px; height: 16px;
      border: 1px solid $ic-Input-border;
      position: absolute;
      top: 5px; left: 0;
      background: $ic-color-light;
    }

  }

  ~ .ic-Form-message { margin-left: $ic-radio-checkbox-left-offset; }

  input[type="radio"] {
    opacity: 0;
    position: absolute;
    top: 0; left: 0;

    // overwrite Bootstrap
    ~ .ic-Label { vertical-align: baseline; }

    &:not([disabled]):hover {
      ~ .ic-Label:before { border-color: $ic-brand-primary; }
    }

    &:checked {
      ~ .ic-Label:before {
        border-color: $ic-brand-primary;
        box-shadow: inset 0 0 0 3px $ic-color-light;
        background: $ic-brand-primary;
      }
    }

    &:focus {
      ~ .ic-Label {
        @include high-contrast-focus;
        &:before {
          box-shadow: inset 0 0 0 2px $ic-brand-primary-lightened-15, inset 0 0 0 4px $ic-color-light;
          background: $ic-brand-primary;
        }
      }
    }

    &[disabled] {
      ~ .ic-Label {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }
    }
  }

  &.ic-Radio--icon-only {
    height: 2.75rem;

    .ic-Label {
      transition: all 0.2s;
      padding: 0.5rem;
      background-color: $ic-color-light;
      border: 2px solid transparent;
      border-radius: $borderRadius;
      color: $ic-font-color-dark;

      &:hover {
        border-color: $ic-border-light;
      }

      &:before {
        display: none;
      }

      > svg {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
      }
    }

    input[type="radio"] {
      &:checked {
        ~ .ic-Label {
          border-color: $ic-brand-primary;
          color: $ic-brand-primary;
        }
      }
      &:focus {
        ~ .ic-Label {

          @if $use_high_contrast {
            outline: 1px dotted $ic-color-dark;
            outline-offset: -5px;
          }
          @else {
            box-shadow:
              inset 0 0 0 3px $ic-brand-primary-lightened-15;
          }

        }
      }
    }
  }
}

.ic-Checkbox-group {

  &.ic-Checkbox-group--inline {
    @include breakpoint(tablet) {
      display: flex;
      flex-wrap: wrap;
      .ic-Form-control.ic-Form-control--checkbox {
        margin-right: $ic-sp*1.5;
      }
      .ic-Form-message { display: block; }
    }
  }

}

.ic-Form-control.ic-Form-control--checkbox {
  line-height: 1;
  margin-bottom: 0;

  &.ic-Form-control--has-error,
  &.ic-Form-control--has-success,
  &.ic-Form-control--has-warning {
    .ic-Label { display: block; }
  }

  .ic-Label {
    margin-bottom: 0;
    position: relative;
    z-index: 1;
    padding: $ic-sp/3 0 $ic-sp/3 $ic-radio-checkbox-left-offset;
    font-weight: normal;
    display: inline-block;

    &:before {
      content: "";
      transition: border-color 0.2s ease-out, outline-offset 0.2s ease-out, outline-color 0.2s ease-out;
      box-sizing: border-box;
      position: absolute;
      top: 5px; left: 0;
      width: 16px; height: 16px;
      border-radius: $baseBorderRadius;
      background: url("/images/forms/ic-checkbox-bg.svg") no-repeat center bottom $ic-color-light;
      background-size: 16px 48px;
      border: 1px solid $ic-Input-border;
      outline: 2px solid transparent;
      outline-offset: -12px;
    }
  }

  .ic-Form-message {
    margin-left: $ic-radio-checkbox-left-offset;
    vertical-align: middle;
  }

  input[type="checkbox"] {
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0; left: 0;

    &:not([disabled]):hover {
      ~ .ic-Label:before { border-color: $ic-brand-primary; }
    }

    &:focus {
      ~ .ic-Label {
        @include high-contrast-focus;
        &:before {
          border-color: $ic-brand-primary;
          outline-offset: -3px;
          outline-color: $ic-brand-primary-lightened-15;
        }

      }
    }

    &:checked {
      ~ .ic-Label {
        &:before {
          background-color: $ic-brand-primary;
          background-position: center -1px;
          border-color: $ic-brand-primary;
        }
      }
      &:focus {
        ~ .ic-Label:before {
          outline-color: rgba($ic-color-light, 0.35);
        }
      }
    }

    &[disabled] {
      ~ .ic-Label {
        opacity: 0.5;
        cursor: not-allowed;
        pointer-events: none;
      }
    }

  }
}

.ic-Input-group {
  display: flex;
  box-sizing: border-box;

  .ic-Action-header__Primary & { flex: 1; }

  .ic-Input {
    width: auto;
    flex: 1;

    &:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    &:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  .Button {

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      &:not(.Button--primary):not(.Button--secondary):not(.Button--success):not(.Button--warning):not(.Button--danger) { border-right: none; }
    }

    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      &:not(.Button--primary):not(.Button--secondary):not(.Button--success):not(.Button--warning):not(.Button--danger) { border-left: none; }
    }
  }

  .ic-Input-group__add-on,
  .ic-Label {
    height: $ic-Input-standard-height;
    background: $ic-color-light;
    border: 1px solid $ic-Input-border;
    display: flex;
    align-items: center;
    padding: $ic-sp/2 ($ic-sp - 4);

    &:first-child {
      border-right: none;
      border-top-left-radius: $baseBorderRadius;
      border-bottom-left-radius: $baseBorderRadius;
    }
    &:last-child {
      border-left: none;
      border-top-right-radius: $baseBorderRadius;
      border-bottom-right-radius: $baseBorderRadius;
    }
  }

  .ic-Input-group__add-on {
    color: $ic-font-color--subdued;
    box-sizing: border-box;
  }

  .ic-Label { margin-bottom: 0; }

}

.ic-Action-header {
  margin-bottom: $ic-sp*2;
  box-sizing: border-box;

  &.ic-Action-header--before-item-groups {
    margin-bottom: 0;
    padding-bottom: $ic-sp;
    border-bottom: 1px solid $ic-border-light;
  }

  @include breakpoint(tablet) {
    display: flex;
    align-items: center;
    box-sizing: border-box;

    .ic-Action-header__Primary {
      flex: 1;
      margin-bottom: 0;
      box-sizing: border-box;
    }

    .ic-Action-header__Secondary {
      flex: 1;
      box-sizing: border-box;
      text-align: right;
      > .Button,
      > .btn,
      > .ui-button { margin-left: $ic-sp/4; }
    }

    .ic-Action-header__Primary + .ic-Action-header__Secondary {
      flex: 1;
      padding-left: $ic-sp*2;
    }
  }
}

.ic-Action-header__Heading { margin: 0; }

.ic-Action-header__Primary {
  margin-bottom: $ic-sp/2;
}

.ic-Form-action-box {
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  margin-bottom: $ic-sp*2;
  @include breakpoint(desktop) { margin-bottom: $ic-sp; }

  .ic-Form-control {
    margin-bottom: $ic-sp/2;
    @include breakpoint(desktop) {
      margin: 0 $ic-sp/3;
      flex: 1;
      &:first-child { margin-left: 0; }
      &:last-of-type { margin-right: 0; }
    }
  }

}

.ic-Form-action-box__Form {
  flex: 1;
  box-sizing: border-box;
  @include breakpoint(desktop) {
    display: flex;
    align-items: center;
  }
}

.ic-Form-action-box__Actions {
  box-sizing: border-box;
  padding-left: $ic-sp*4;
}

.ic-Form-help-text {
  @include fontSize(12px);
  display: block;
  margin-top: $ic-sp/2;
  color: $ic-font-color--subdued;
  width: 100%;
  line-height: 1.5;
}
